<template>
    <div id="apps">
        <div style="margin-left: 20px;">
            <headtitle :title="title"></headtitle>
            <!-- <selectbeforethired :title="title" :sel1="sel1"></selectbeforethired> -->
        </div>
        <div style="margin-left: 20px;">
            <h3>问题审核管理</h3>
            <div style="width: 95%;" id="select1">
                <select name=""  id="sel1" selected="null" @change="sel">
                    <option value="">删除状态</option>

                </select>
                <select name=""  id="sel2" selected="null" @change="sel">
                    <option value="">企业分类</option>

                </select>
                <select name=""  id="sel3" selected="null" @change="sel">
                    <option value="">所属行业</option>

                </select>
                <select name=""  id="sel4" selected="null" @change="sel">
                    <option value="">所属市区</option>

                </select>
                <select name=""  id="sel5" selected="null" @change="sel">
                    <option value="">处理单位</option>

                </select>
                <select name=""  id="sel6" selected="null" @change="sel">
                    <option value="">企业分级</option>

                </select>

                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block"  @click="sel2">
                        <el-date-picker v-model="value1" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
                <span>至</span>
                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block"  @click="sel2">
                        <el-date-picker v-model="value2" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
            </div>
            <div style="margin-top: 20px;position: relative;" id="select2" >
                <div id="left">
                    <input type="text" style=" width: 300px; height: 28px;">
                    <div
                        style="width: 80px;height: 32px;border: 0px;background-color: #169bd5;color: white;line-height: 28px;text-align: center;display: inline-block;" id="tjsel" @click="tjsel">
                        搜索</div>
                </div>
                <div id="right"
                    style="z-index: 999;position: absolute;right: 0%;background-color: white;height: 30px;overflow: hidden;border: #169bd5 1px solid;">
                    <span
                        style="width: 150px;background-color: #169bd5;color: white;height: 30px;display: inline-block;line-height: 30px;text-align: center"
                        @click="open">自定义列表</span>
                    <br>
                    <input type="checkbox" checked="checked" value="1" onclick="return false;"><span
                        style="font-size: 14px;">企业名称</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;"><span style="font-size: 14px;">组织机构代码</span>
                    <br>
                    <input type="checkbox" id="qyfl" ><span style="font-size: 14px;" >企业分类</span>
                    <br>
                    <input type="checkbox" id="sshy"><span style="font-size: 14px;"  >所属行业</span>
                    <br>
                    <input type="checkbox" id="hyfj" ><span style="font-size: 14px;"  >行业分级</span>
                    <br>
                    <input type="checkbox" id="sssq"><span style="font-size: 14px;"  >所属市区</span>
                    <br>
                    <input type="checkbox" id="ssjd"><span style="font-size: 14px;" >所属街道</span>
                    <br>
                    <input type="checkbox"  checked="checked" onclick="return false;" value="7"><span style="font-size: 14px;">删除状态</span>
                    <br>
                    <input type="checkbox"  checked="checked" onclick="return false;"><span style="font-size: 14px;">申请时间</span>
                    <br>
                    
                   

                </div>
            </div>
        </div>
        <div id="table1" style="position: relative;">
            <div style="margin-left: 20px;" id="msgbox" >

                <el-table :data="tableData" style="width: 100% ;color: black;" height="450" border="true"
                    :cell-style="{ textAlign: 'center'  , padding:'6px 0'}" :header-cell-style="{ 'text-align': 'center', color: 'black' }">
                    <el-table-column fixed prop="id" label="序号" width="60" />
                    <el-table-column prop="name" label="企业名称" width="180" />
                    <el-table-column prop="state" label="组织结构代码" width="180" />
                    <el-table-column prop="city" label="企业分类" width="180"  v-if="b"/>
                    <el-table-column prop="address" label="所属行业" width="100"  v-if="c" />
                    <el-table-column prop="zip" label="企业分级" width="100"  v-if="d"/>
                    <el-table-column prop="data1" label="所属市区" width="150"  v-if="e" />
                    <el-table-column prop="data2" label="所属街道" width="150"  v-if="f"/>
                    <el-table-column prop="data3" label="删除状态" width="150" />
                    <el-table-column prop="data4" label="申请时间" width="200" />
                    <el-table-column fixed="right" label="操作" width="150">
                        <template #default="scope"  >
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" @click="handleClick1(scope.row)">通过</el-button>
                            <el-button link type="primary" size="small" @click="handleClick2(scope.row)">驳回</el-button>
                        </template>
                    </el-table-column>


                </el-table>

            </div>
            <div style="position: absolute;top: 50px;left: 0px;width: 100%;z-index:999;" id="showbox">
                <div style="position: absolute;top: -25px;right: 0px;width: 30px;height: 20px;background-color: #169bd5;font-weight: 600;line-height: 20px;text-align: center;font-size: 20px;"
                    @click="close">x</div>
                <table border="1px" cellpadding="0" cellspacing="0"
                    style="width: 100%;border: #ebeef5;text-align: center;margin-left: 1%;">
                    <tr>
                        <td id="main">序号</td>
                        <td id="valuesa">{{ msg1 }}</td>
                        <td id="main">具体问题</td>
                        <td id="values">{{ msg2 }}</td>
                    </tr>
                    <tr>
                        <td id="main">企业名称</td>
                        <td id="valuesa">{{ msg3 }}</td>
                        <td id="main">问题类别</td>
                        <td id="values">{{ msg4 }} </td>
                    </tr>
                    <tr>
                        <td id="main">问题性质</td>
                        <td id="valuesa">{{ msg5 }}</td>
                        <td id="main">办理状态</td>
                        <td id="values">{{ msg6 }}</td>
                    </tr>
                    <tr>
                        <td id="main">督办状态</td>
                        <td id="valuesa">{{ msg7 }}</td>
                        <td id="main">督办方式</td>
                        <td id="values">{{ msg8 }}</td>
                    </tr>
                    <tr>
                        <td id="main">超时状态</td>
                        <td id="valuesa">{{ msg9 }}</td>
                        <td id="main">所属市区</td>
                        <td id="values">{{ msg10 }}</td>
                    </tr>
                    <tr>
                        <td id="main">处理单位</td>
                        <td id="valuesa">{{ msg11 }}</td>
                        <td id="main">提交时间</td>
                        <td id="values">{{ msg12 }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 分页 -->
        <div style="margin-left: 20px;" id="pageall">
           <span style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-right: 30px;">首页</span>

            <div class="page">
                <el-pagination background layout="prev, pager, next" :total="totallenght" @prev-click="prev"
                    @next-click="next" />

            </div>
            <span style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-left: 30px;">尾页</span>
        </div>
</div>
</template>

<script lang="ts">
import Axios from "@/router/ycyaxios/axiosinstance";
// import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import { toRaw } from '@vue/reactivity'
import { ref, onMounted, } from 'vue'
import { useStore } from "vuex"
import { useRouter } from 'vue-router'

// import {components} from 'vue'
// import  selectbeforethired from '../../components/Problems/selectbeforethired'
import headtitle from '../../components/Problems/headtitle.vue'
export default {
    name: 'SuperviseManagement',
    data() {
        return {
            title: "问题审核管理",
          
        }
    },
    components: {
        headtitle,
        //    selectbeforethired,
    },
    setup() {
        let b:any=ref("true");
        let c:any=ref("true");
        let d:any=ref("true");
        let e:any=ref("true");
        let f:any=ref("true");
        let g:any=ref("true");
        let h:any=ref("true");
        let i:any=ref("true");
        const store = useStore();
        const router = useRouter()
        let data: any = ref();
        let idshow:any=ref();
    //获取数据
const totallenght: any = ref()
        const tableData: any = ref('')
store.commit("getaudit", { page: 1 })
data = [];
        data = store.state.ycy.auditlist;
        tableData.value = data;
        totallenght.value = tableData.value.length;
        console.log(data)
//获取数据结束
///选择框的数据开始
const sel = () => {
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            const sel6: any = document.getElementById("sel6");
            const sele6: any = sel6.value;

            store.commit("selaudit", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5, sel6: sele6, })
        }
             const sel2 = () => {
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            const sel6: any = document.getElementById("sel6");
            const sele6: any = sel6.value;
            const data: any = value1.value;
            const year: any = data.getFullYear()
            const years: any = year.toString()
            const day: any = data.getDate()
            const days: any = day.toString()
            const month: any = data.getMonth()
            const months: any = month.toString()
            const daytime: any = (years + "-" + months + "-" + days)
            //开始时间戳
            let start = new Date(daytime).getTime();
            const data2: any = value2.value;
            const year2: any = data2.getFullYear()
            const years2: any = year2.toString()
            const day2: any = data2.getDate()
            const days2: any = day2.toString()
            const month2: any = data2.getMonth()
            const months2: any = month2.toString()
            const daytime2: any = (years2 + "-" + months2 + "-" + days2)
            //结束时间戳
            let end = new Date(daytime2).getTime();

            //  console.log(start,end )

            store.commit("selaudit", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5, sel6: sele6, })
        }
///选择框的数据结束
///搜索框选择数据开始
const tjsel = () => {
            const tjsel: any = document.getElementById("tjsel");
            const tjsel1: any = tjsel.value;
            // console.log(tjsel1)
            store.commit("tjselaudit", { page: 1, tj: tjsel1 })
        }
        const close = () => {
            let showbox: any = document.getElementById("showbox");
            showbox.style.display = "none";
            let msgbox: any = document.getElementById("msgbox");
            msgbox.style.opacity = 1;
        }
///搜索框选择数据结束
const msg1 = ref(''); const msg2 = ref(''); const msg3 = ref(''); const msg4 = ref(''); const msg5 = ref(''); const msg6 = ref(''); const msg7 = ref(''); const msg8 = ref(''); const msg9 = ref(''); const msg10 = ref(''); const msg11 = ref(''); const msg12 = ref('');
       
       const handleClick = (value: any) => {
           msg1.value = value.id;
           let showbox: any = document.getElementById("showbox");
           showbox.style.display = "block";
           let msgbox: any = document.getElementById("msgbox");
           msgbox.style.opacity = 0;
       }

const handleClick1 = (value:any) => {
//   console.log(value)
const datas=JSON.stringify(value)
  
}
const handleClick2 = (value:any) => {
//   console.log(value)
const datas=JSON.stringify(value)
  
}
const open = () => {
            const a: any = document.getElementById("right");
            const qyfl:any=document.getElementById("qyfl");


           
            if (parseInt(a.style.height) == 30) {
                a.style.height = "220px";
                // console.log(1111111);

            }
            else if (parseInt(a.style.height) == 220) {
                a.style.height = "30px";

            }
       
              b.value=qyfl.checked;
             const sshy:any=document.getElementById("sshy");
            //  console.log(sshy.checked)
             c.value=sshy.checked;
             const hyfj:any=document.getElementById("hyfj");
            // console.log(hyfj.checked)
             d.value=hyfj.checked;
             const sssq:any=document.getElementById("sssq");
             e.value=sssq.checked;
             const ssjd:any=document.getElementById("ssjd");
             f.value=ssjd.checked;

        }
        const size = ref<'default'>('default')

        const value1 = ref('')
        const value2 = ref('')
        // let datas=[];

        let page = 0;
        const prev = () => {
            page--;
            console.log(page)
        }
        const next = () => {
            page++;
            console.log(page)
        }
        // const tableData = [
        //     {
        //         date: '1',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '2',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '3',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '4',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '5',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '6',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '7',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '8',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '9',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
        //     {
        //         date: '10',
        //         name: '城兴物业管理有限公司',
        //         state: '600577321',
        //         city: '国有',
        //         address: '工业',
        //         zip: '市属',
        //         data1: '临海市南关区',
        //         data2: '华康街道',
        //         data3: '待审核',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "查看通过驳回",
             
        //     },
            
           
        // ];
        // const totallenght = tableData.length
        const shortcuts = [
            {
                text: 'Today',
                value: new Date(),
            },
            {
                text: 'Yesterday',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24)
                    return date
                },
            },
            {
                text: 'A week ago',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                    return date
                },
            },
        ]

        const disabledDate = (time: Date) => {
            return time.getTime() > Date.now()
        };
        return {
            disabledDate,
            size,
            shortcuts,
            value2,
            value1,
            tableData,
            totallenght,
            prev,
            next,
            handleClick,
            handleClick1,
            handleClick2,
            open,
            b,c,d,e,f ,g,h,i,
            sel,sel2,tjsel,
            msg1, msg2, msg3, msg4, msg5, msg6, msg7, msg8, msg9, msg10, msg11, msg12,
            close,

        }
    }
}
</script>

<style scoped>
#valuesa{
width: 35%;
}
#showbox {
    display: none;
}

#main {
    width: 15%;
    height: 40px;
    font-weight: 800;


}
#apps {
    background-color: white;
    /* width: 1200px;
     */
     width: 80%;
    /* height: 200px; */
    /* border: 1px solid red; */
    border-radius: 5px;
}

#pageall {
    width: 95%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

select {
    width: 120px;
    height: 28px;

}

#select1 {
    display: flex;
    justify-content: space-between;
}

#select2 {
    width: 95%;
    display: flex;
    justify-content: space-between;
}

#table1 {
    width: 95%;
    margin-top: 40px;
}
</style>